import axios from "axios";
import React, { useEffect, useState } from "react";
import Heand from "../component/heand";
import { Modal, Input } from 'antd';
import { useNavigate } from "react-router-dom";

function Zc() {
    const [newname, setNewname] = useState('')
    const [newpassword, setNewpassword] = useState('')
    const [newpasswordtwo, setNewpasswordtwo] = useState('')
    const [newphone, setNewphone] = useState('')
    const [newqq, setNewqq] = useState('')
    const navigate = useNavigate()
    const handname = (event) => {
        setNewname(event.target.value)
    }
    const handpassword = (event) => {
        setNewpassword(event.target.value)
    }
    const handpasswordtwo = (event) => {
        setNewpasswordtwo(event.target.value)
    }
    const handphone = (event) => {
        setNewphone(event.target.value)
    }
    const handqq = (event) => {
        setNewqq(event.target.value)
    }


    const [noname, setNoname] = useState(false)
    const [nopassword, setNopassword] = useState(false)


    const Noname = () => {
        setNoname(false);
    }
    const Nopassword = () => {
        setNopassword(false);
    }



    var non = 0
    const push = (event) => {
        event.preventDefault();
        axios.get(`https://r5ctn9z9.lc-cn-n1-shared.com/1.1/classes/people`, {
            headers: {
                " X-LC-Id": "r5CTN9z96pCW8mI8fx9YxOmw-gzGzoHsz",
                "X-LC-Key": "8gSsl4Sz0ILMiQeMNMA8xQqg",
                'Content-Type': 'application/json'
            }
        }).then((res) => {
            console.log(res)
            for (let i = 0; i < res.data.results.length; i++) {
                if (newname === res.data.results[i].username) {
                    console.log('用户名存在')
                    non = 0
                    setNoname(true)
                    break
                }
                else {
                    if (newpassword !== newpasswordtwo) {
                        console.log('两次密码不一致')
                        non = 0
                        setNopassword(true)
                    }
                    else {
                        non = 1
                    }
                }
            }
            if (non === 1) {
                axios.post(`https://r5ctn9z9.lc-cn-n1-shared.com/1.1/classes/people`, {
                    username: newname,
                    password: newpassword,
                    phone: newphone,
                    qq: newqq,
                    gly: 'false'
                }, {
                    headers: {
                        " X-LC-Id": "r5CTN9z96pCW8mI8fx9YxOmw-gzGzoHsz",
                        "X-LC-Key": "8gSsl4Sz0ILMiQeMNMA8xQqg",
                        'Content-Type': 'application/json'
                    }
                }).then(() => {
                    console.log('注册成功')
                    navigate('/')
                }).catch((error) => {
                    console.log(error)
                })
            }


        })
    }

    return (
        <div> <Heand />
            <div className="zcdiv">
                <div className="Zc">
                    <div className="zcinput">
                        <div className="hygl">用户注册</div>
                        <form onSubmit={push} className="zc">
                            <div className="zcpeople">

                                <span>注册用户名</span>
                                <Input className="zcinput5" value={newname} onChange={handname} type="text" />

                            </div>
                            <div className="zcpeople">
                                <span>注册密码</span>
                                <Input.Password className="zcinput1" value={newpassword} onChange={handpassword} type="text" />

                            </div>
                            <div className="zcpeople">
                                <span>确认注册密码</span>
                                <Input.Password className="zcinput2" value={newpasswordtwo} onChange={handpasswordtwo} type="text" />

                            </div>
                            <div className="zcpeople">
                                <span>手机号码</span>
                                <Input className="zcinput3" value={newphone} onChange={handphone} type="text" />

                            </div>
                            <div className="zcpeople">
                                <span>QQ</span>
                                <Input className="zcinput4" value={newqq} onChange={handqq} type="text" />

                            </div>
                            <div className="zcbt">
                                 <button type="submit" >注册</button>
                            </div>
                           

                        </form>
                        <Modal
                            title="警告"
                            open={noname}
                            onOk={Noname}
                            onCancel={Noname}
                        >
                            <p>用户名已存在，请重新输入！</p>
                        </Modal>
                        <Modal
                            title="警告"
                            open={nopassword}
                            onOk={Nopassword}
                            onCancel={Nopassword}
                        >
                            <p>两次密码不一致，请重新输入！</p>
                        </Modal>
                    </div>
                </div>

            </div>

        </div>
    )
}

export default Zc